// tab切换
$("#tabList").on("click", ".tab-item", function () {
  let index = $(this).index();
  $(this).addClass("active").siblings().removeClass("active");
  // TODO 根据index切换tab内容
});

// 页面滚动到底部加载更多
let loading = false; // 是否正在加载中
let isEnd = false; // 是否已经加载完所有数据
$(window).on("scroll", function () {
  let scrollTop = $(this).scrollTop();
  let scrollHeight = $(document).height();
  let windowHeight = $(this).height();
  if (scrollTop + windowHeight >= scrollHeight - 100) {
    if (loading || isEnd) {
      return;
    }
    console.log("加载更多数据");
    loading = true;
    $("#textTip").text("数据加载中...");
    setTimeout(function () {
      loadMoreData();
      loading = false;
    }, 1000); // 模拟加载时间
  }
});

// 加载更多数据
function loadMoreData() {
  if ($(".video-item").length > 12) {
    // 模拟没有更多数据
    $("#textTip").text("没有更多数据了");
    isEnd = true;
  } else {
    // 模拟加载更多数据
    for (let i = 0; i < 6; i++) {
      let $item = $(`
        <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
      `);
      $(".video-list").append($item);
    }
  }
}

const $videoPopup = $("#videoPopup");
const $popupVideo = $("#popupVideo");
const $closePopup = $("#closePopup");

// 点击播放按钮显示弹窗并播放视频
$(".video-list").on("click", ".button-play", function () {
  const videoSrc = $(this).data("src");
  if (videoSrc) {
    $popupVideo.attr("src", videoSrc);
    $videoPopup.css("display", "flex");
    $popupVideo[0].play();
  }
});

// 点击关闭按钮隐藏弹窗并暂停视频
$closePopup.on("click", function () {
  $videoPopup.css("display", "none");
  $popupVideo[0].pause();
  $popupVideo.attr("src", "");
});

let file = null;
// 选择视频
$("#videoInput").on("change", function (e) {
  const maxFileSize = 30 * 1024 * 1024;
  file = e.target.files[0];

  if (file) {
    // 验证文件大小
    if (file.size > maxFileSize) {
      showToast("视频大小不能超过30MB");
      return;
    }

    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      const videoUrl = this.result;
      $(window).off("scroll");
      history.pushState(null, null, "#publish");
      $("#pageList").hide();
      $("#pagePublish").show();
      $("#formVideo").attr("src", videoUrl);
    };
  }
});

function showToast(message) {
  const toast = document.getElementById("toast");
  toast.textContent = message;
  toast.hidden = false;
  setTimeout(() => {
    toast.hidden = true;
  }, 3000);
}

// 作品标题剩余字数
$("#inputTitle").on("input", function () {
  let len = $(this).val().length;
  let num = 50 - len;
  if (num < 0) {
    num = 0;
  }
  $("#titleCount").text(num);
});

// 作品描述剩余字数
$("#textareaDesc").on("input", function () {
  let len = $(this).val().length;
  let num = 200 - len;
  if (num < 0) {
    num = 0;
  }
  $("#descCount").text(num);
});

// 选择平台
let checkedList = {
  kuaishou: true,
  shipinhao: true,
};
$(".checkbox").on("click", function () {
  if ($(this).hasClass("disabled")) {
    return;
  }
  // 检查授权
  const auth = true; // TODO 判断是否授权
  if (!auth) {
    if ($(this).data("type") === "kuaishou") {
      $("#authPopup .popup-logo").attr("src", "./images/popup-kuaishou.png");
      $("#authPopup .text-name").html("快手权限未开启");
      $("#authPopup .button-link").attr("href", "快手授权链接");
    } else if ($(this).data("type") === "shipinhao") {
      $("#authPopup .popup-logo").attr("src", "./images/popup-shipinhao.png");
      $("#authPopup .text-name").html("视频号权限未开启");
      $("#authPopup .button-link").attr("href", "视频号授权链接");
    }
    $("#authPopup").show();
  } else {
    $(this).toggleClass("checked");
    checkedList[$(this).data("type")] = $(this).hasClass("checked");
    console.log($(this).data("type"), $(this).hasClass("checked"), checkedList);
  }
});

// 发布
$("#buttonPublish").on("click", function () {
  if (validate()) {
    // TODO 发布作品
    console.log(file);
    console.log($("#inputTitle").val());
    console.log($("#textareaDesc").val());
    console.log(checkedList);
  }
});

// 表单验证
function validate() {
  if (!$("#formVideo").attr("src")) {
    showToast("请选择视频");
    return false;
  }
  // if ($("#inputTitle").val().trim().length === 0) {
  //   showToast("请输入作品标题");
  //   return false;
  // }
  if ($("#textareaDesc").val().length === 0) {
    showToast("请输入作品描述");
    return false;
  }
  if (!checkedList.kuaishou && !checkedList.shipinhao) {
    showToast("请选择发布平台");
    return false;
  }
  return true;
}

// 页面后退
$(".icon-back").on("click", back);
function back() {
  history.back();
  $("#pageList").show();
  $("#pagePublish").hide();
  $("#videoInput").val("");
  $("#formVideo").attr("src", "");
  $("#inputTitle").val("");
  $("#textareaDesc").val("");
  $(".checkbox").removeClass("checked");
  checkedList = {
    kuaishou: false,
    shipinhao: false,
  };
}

// $("#videoList").on("click", ".icon-delete", function () {
//   $(this).parents(".video-item").remove();
// });
